import { ShelfPaper } from '@/api/Shelf';
import { CategoryCascader } from '@/components/CategoryCascader';
import { SourceSelectModal } from '@/components/SourceSelect';
import Source from '@/components/SourceSelect/Entity/Source';
import { SourceSelectModalProps } from '@/components/SourceSelect/interface';
import { useUpdateEffect } from 'ahooks';
import { App, Button, Form, Modal } from 'antd';
import { useState } from 'react';

function SecClass({
  onSuccess,
  onReSec,
  name,
  guid,
  onCancel,
  open,
}: {
  onSuccess?(): void;
  guid?: string;
  name?: string;
  onReSec?(): void;
  onCancel?(): void;
  open?: boolean;
}) {
  const [form] = Form.useForm<{ classId: string }>();
  const [itemProps] = CategoryCascader.useFieldLevelTwo();
  return (
    <Modal
      width={480}
      open={open}
      centered
      title="选择分类"
      onOk={async () => {
        if (guid) {
          const value = await form.validateFields();
          await ShelfPaper.createByCopy({ guid, ...value });
          onSuccess?.();
        }
      }}
      onCancel={() => {
        form.resetFields();
        onCancel?.();
      }}
      destroyOnClose
    >
      <Form form={form} preserve={false}>
        <Form.Item label="试卷" shouldUpdate={() => false}>
          {() => {
            return (
              <>
                {name}
                <Button type="text" onClick={onReSec}>
                  重新选择
                </Button>
              </>
            );
          }}
        </Form.Item>
        <Form.Item label="分类" name="classId" rules={[{ required: true }]} {...itemProps}>
          <CategoryCascader />
        </Form.Item>
      </Form>
    </Modal>
  );
}

interface CreateFromPaperPorps extends Pick<SourceSelectModalProps, 'openDep'> {
  onSuccess?(): void;
}

export function CreateFromPaper({ openDep, onSuccess }: CreateFromPaperPorps) {
  const [value, setValue] = useState<Source[]>([]);
  const [open, setOpen] = useState(false);
  const { message } = App.useApp();
  const [classOpen, setClassOpen] = useState(false);
  const closeClass = () => {
    setClassOpen(false);
  };
  useUpdateEffect(() => {
    if (openDep) {
      setOpen(true);
    }
  }, [openDep]);

  return (
    <>
      <SourceSelectModal
        value={value}
        open={open}
        preSet="选择单个试卷"
        onChange={(secVals = []) => {
          const secVal = secVals[0];
          if (secVal) {
            setValue(secVals);
            setClassOpen(true);
          } else {
            message.warning('请先选择试卷');
          }
        }}
        onCancel={() => {
          setOpen(false);
        }}
      ></SourceSelectModal>
      <SecClass
        open={classOpen}
        name={value[0]?.name}
        guid={value[0]?.id}
        onSuccess={() => {
          setValue([]);
          onSuccess?.();
          closeClass();
          setOpen(false);
        }}
        onCancel={closeClass}
        onReSec={() => {
          // 实际上目前设置value是不生效的
          setValue([]);
          closeClass();
        }}
      ></SecClass>
    </>
  );
}
